<template>
    <div class="hello">
      <h1>当前求和为:{{sum }}</h1>
      <h2>乘以10之后就是:{{bigSum}}</h2>
      <button @click='jiaWait'>延迟+</button>
      <button @click="JIA">直接+</button>
    </div>
  </template>
  
  <script>
    // 引入的方式是不变的，依然是这样引入
  import { mapGetters,mapState } from 'vuex'
  import { mapMutations,mapActions } from 'vuex'
  export default {
    name: 'P116',
    data(){
        return {
            sum:this.$store.state.countDemo.sum
        }
    },
    computed:{
      /*
        第二种方法则是自己写，不借助mapGetters等生成器。
        这里有一个有趣的知识，state是可以这样写的。
        this.$store.state.countDemo.sum这样去读取，但是其他的像getters、actions、mutatinos就不行了
      */
     sum(){
      return this.$store.state.countDemo.sum
     }, 
    //  其他的以getters为例，需要这样去拿到东西
     bigSum(){
        return this.$store.getters('countDemo/bigSum')
     }
    },
    methods:{
        jiaWait(){
            this.$store.dispatch.countDemo.jiaWait(1)
        },
        JIA(){
            this.$store.commit.countDemo.JIA(1)
        }
    }
  }
  </script>
  